<template>
  <div class="leaveDiv">
    <el-row :gutter="20">
      <!--      <el-col :span="8">-->
      <!--        &lt;!&ndash; 各组主动回答问题次数表格及饼状图 &ndash;&gt;-->
      <!--        <el-card class="chart-card">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span>请假情况</span>-->
      <!--          </div>-->
      <!--          <div class="chart-container">-->
      <!--            <div class="chart" ref="answerPieChart"></div>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
      <el-col :span="24">
        <!-- 饭卡消费柱状图 -->
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>饭卡消费情况</span>
          </div>
          <div class="chart-container">
            <div ref="mealCardBarChart" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "mealCardConsumption",
  data() {
    return {
      consumptionData: [],
      loading: false
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        // 获取饭卡消费数据
        const response = await this.$overviewapi.getMealcard();
        if (response.code === '200') {
          this.consumptionData = response.data;
          this.$nextTick(() => {
            this.initMealCardBarChart();
          });
        } else {
          this.$message.error(response.msg || '获取饭卡消费数据失败');
        }
      } catch (error) {
        console.error('加载饭卡消费数据失败:', error);
        this.$message.error('加载饭卡消费数据失败');
      } finally {
        this.loading = false;
      }
    },
    // 饭卡消费柱状图
    initMealCardBarChart() {
      const chartDom = this.$refs.mealCardBarChart;
      if (!chartDom) return;
      const myChart = echarts.init(chartDom);
      const groupNames = this.consumptionData.map(item => item.groupName);
      const amounts = this.consumptionData.map(item => Math.abs(Number(item.amount)) || 0);
      const option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c} 元'
        },
        xAxis: {
          type: "category",
          data: groupNames,
          axisLabel: {
            color: "#68d8fe",
            fontWeight: "bold",
            rotate: 0,
          },
        },
        yAxis: {
          type: "value",
          name: "金额（元）",
          axisLabel: {
            color: "#68d8fe",
            fontWeight: "bold",
          },
        },
        series: [
          {
            type: "bar",
            name: "金额",
            data: amounts,
            itemStyle: {
              color: '#68d8fe'
            }
          },
        ],
      };
      myChart.setOption(option);
      // 响应窗口大小变化
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.leaveDiv {
  width: 100%;
  height: 100%;
  //background-color: #fff;
  .clearfix {
    font-size: 22px;
    font-weight: bold;
    color: #68d8fe;
  }
  .chart-container {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .chart {
    height: 300px;
  }
  .chart-card {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    background-color: rgba(104, 216, 254, 0.1) !important;
    border: 1px solid rgba(104, 216, 254, 0.5) !important;
    border-radius: 8px;
  }

  .chart-card >>> .el-card__header {
    background-color: rgba(104, 216, 254, 0.2);
    border-bottom: 1px solid rgba(104, 216, 254, 0.5);
    color: #68d8fe;
    font-weight: bold;
  }

  .chart-card >>> .el-card__body {
    background-color: transparent;
  }
}
</style>
